<template>
  <div>
    <div class="statusBar">我是状态栏</div>
    <div class="search">
      <van-search
        v-model="value"
        shape="round"
        background="#4fc08d"
        placeholder="请输入搜索关键词"
      />
    </div>
    <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
      <van-swipe-item
        ><img src="../assets/images/banner/01.jpg" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="../assets/images/banner/02.jpg" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="../assets/images/banner/03.jpg" alt=""
      /></van-swipe-item>
    </van-swipe>
    <div class="hotPoint">
      <div class="colorSquare"></div>
      <div class="word">热点</div>

      <img src="../assets/images/ic_scan_gray.png" alt="" />
      <img src="../assets/images/ic_chat_white.png" alt="" />
    </div>
    <ul class="infoList">
      <li v-for="item in homeListDatas" :key="item.id">
        <div class="leftBox">
          <div class="limitWordBox2">
            <div class="word3">{{ item.title }}</div>
          </div>
          <div class="limitWordBox">
            <div class="word1">{{ item.target.desc }}</div>
          </div>

          <div class="word2">作者：{{ item.target.author.name }}</div>
        </div>
        <div class="rightImgBox">
          <img :src="item.target.author.avatar" alt="" />
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import homeListDatas from '@/assets/data/homeData.json' // 引入
// import q from '@/assets/data/6_month_movie.json' // 引入
// import w from '@/assets/data/coming_movie.json' // 引入
// import e from '@/assets/data/now_hot_movie.json' // 引入
// console.log(q)
// console.log(w)
// console.log(e)

console.log(homeListDatas)
export default {
  data () {
    return {
      value: '',
      homeListDatas: homeListDatas.recommend_feeds
      // src: require('homeListDatas.target.author.avatar')
      // active: '/'
    }
  }
}
</script>

<style lang="scss" scope>
html,
body {
  overflow: hidden;
}
.statusBar {
  width: 750px;
  height: 40px;
  background-color: black;
  color: white;
  font-size: 40px;
  position: absolute;
  top: 0;
}
.search {
  width: 750px;
  height: 90px;
  background-color: #42c055;
  overflow: hidden;
  position: absolute;
  top: 40px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.van-swipe-item {
  font-size: 1rem !important;
}
.van-swipe {
  height: 253px;
  margin-top: 30px;
  // margin-top: -70px;;
}
.hotPoint {
  width: 750px;
  height: 85px;
  position: relative;
  margin-left: 30px;
  margin-bottom: 20px;;
  .word {
    font-size: 34px;
    color: orange;
    font-size: 40px;
    position: absolute;
    top: 25px;;
  }
}
.infoList {
  width: 750px;
  height: 855px;
  overflow: auto;
}
footer {
  width: 750px;
  height: 100px;
  background-color: skyblue;
  position: absolute;
  bottom: 0px;
}
.infoList li {
  width: 700px;
  height: 370px;
  margin-bottom: 20px;
  padding: 32px;
  box-sizing: border-box;
  box-shadow: 0px 0px 15px grey;;
  margin: auto;
}
img {
  width: 750px;
  height: 253px;
}
.van-search {
  width: 672px;
  height: 62px;
  margin-top: 13px;
}
.van-search__content--round {
  border-radius: 10px;
}
.hotPoint img:nth-of-type(1) {
  width: 33px;
  height: 33px;
  position: absolute;
  top: -315px;
  left: 560px;
}
.hotPoint img:nth-of-type(2) {
  width: 48px;
  height: 48px;
  position: absolute;
  top: -325px;
  left: 650px;
}
.leftBox {
  width: 458px;
  height: 250px;
  float: left;
  .limitWordBox{
    width: 458px;
    height: 130px;
    overflow: hidden;
  }
  .limitWordBox2{
    width: 458px;
    height: 104px;
    overflow: hidden;
  }
}
.rightImgBox {
  width: 130px;
  height: 170px;
  float: left;
  img{
    width: 140px;
    height: 140px;
    margin-top: 80px;;
    margin-left: 30px;;
  }
}
.word3 {
  font-size: 36px;
  color: rgb(41, 41, 41);
  line-height: 52px;;
}
.word1 {
  font-size: 23px;
  color: rgb(95, 94, 94);
  margin-top: 25px;;
  line-height: 38px;;
}
.word2 {
  font-size: 21px;
  color: rgb(149, 149, 149);
  margin-top: 43px;;
}
.ultra {
  height: 100%;
  overflow: scroll;
}
.colorSquare {
  width: 8px;
  height: 41px;
  background-color: orange;
  position: absolute;
  left: -30px;
  top: 23px;
}
</style>
